import Taro, {Component, Config} from "@tarojs/taro";
import { AtImagePicker } from 'taro-ui';
import {View, Input, Picker, Image, Form, Button, Text} from "@tarojs/components";

import PageFooterInfo from '../../components/PageFooterInfo'
import PickerArea from '../../components/PickerArea'

import {IStoreProps} from '../../store/Stores'
import {getRuntime} from '../../utils/common'
import {toJS} from "mobx";


import './index.less'

import {inject, observer} from "@tarojs/mobx"

interface IHomeProps extends IStoreProps {
}
// ISO三大体系预约办理
@inject("stores")
@observer
class Page1 extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    allProvince: [],
    allProvinceAreaName: [],
    area: '',
    allBusinessLicenseIMG: [], // 营业执照
    businessLicenseIMG: [],
    allQualificationCertificateIMG: [], // 资质证书
    qualificationCertificateIMG: [], // 资质证书
    allLicenceIMG: [], // 用户许可
    licenceIMG: [], // 用户许可
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: 'ISO三大体系预约办理'})
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  // 地区选择
  pickerArea(res){
    this.setState({
      area: res.province.label+res.city.label
    })
  }

  changeImg1(e) {
    this.setState({
      allBusinessLicenseIMG: e
    }, () => {
      getRuntime().uploadFile(e, (res) => {
        this.setState({
          businessLicenseIMG: res.join(',')
        })
      })
    })
  }

  changeImg2(e){
    this.setState({
      allQualificationCertificateIMG: e
    }, () => {
      getRuntime().uploadFile(e, (res) => {
        this.setState({
          qualificationCertificateIMG: res.join(',')
        })
      })
    })
  }

  changeImg3(e){
    this.setState({
      allLicenceIMG: e
    }, () => {
      getRuntime().uploadFile(e, (res) => {
        this.setState({
          licenceIMG: res.join(',')
        })
      })
    })
  }
  submit(e) {
    let {businessLicenseIMG, qualificationCertificateIMG, licenceIMG,area} = this.state
    let {companyName, contactsName, contactsPhone, contactsEmail, contactsAddress } = e.detail.value
    if (getRuntime().isEmpty(companyName)) {
      getRuntime().showToast('请填写公司名称~')
      return false
    }
    if (getRuntime().isEmpty(area)) {
      getRuntime().showToast('请选择国家地区~')
      return false
    }
    if (getRuntime().isEmpty(contactsName)) {
      getRuntime().showToast('请填写联系人姓名~')
      return false
    }
    if (getRuntime().isEmpty(contactsPhone)) {
      getRuntime().showToast('请填写联系人电话~')
      return false
    }
    if (getRuntime().isEmpty(businessLicenseIMG)) {
      getRuntime().showToast('请上传营业执照~')
      return false
    }
    if (getRuntime().isEmpty(qualificationCertificateIMG)) {
      getRuntime().showToast('请上传资质证书~')
      return false
    }
    if (getRuntime().isEmpty(licenceIMG)) {
      getRuntime().showToast('请上上传用户开户许可~')
      return false
    }
    let businessStandingsStore = this.props.stores.BusinessStandingsStore
    businessStandingsStore.saveStandingInfo({
      form: {
        companyName,
        area,
        businessLicenseIMG,
        qualificationCertificateIMG,
        licenceIMG,
        contactsName,
        contactsPhone,
        contactsEmail,
        contactsAddress
      },
      callback: () => {
        // console.log('提交结果'+res)
        getRuntime().showModal('预约成功', '我们会尽快和您取得联系，请保持电话畅通~', () => {
          getRuntime().navigateBack()
        })
      }
    })
  }

  render() {
    let { allBusinessLicenseIMG, allQualificationCertificateIMG, allLicenceIMG  } = this.state
    return (
      <View className='from-wrap'>
        <Form onSubmit={this.submit.bind(this)}>
          <View className='item-group pt0 pb0'>
            <View className='input-group'>
              <View className='input-name is-require'>公司名称</View>
              <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写公司名称'
                     name='companyName'/>
            </View>
            <View className='input-group '>
              <View className='input-name is-require'>国家/地区</View>
             <PickerArea onPicketArea={this.pickerArea.bind(this)} level={2} />
            </View>
          </View>
          <View className='item-group'>
            <View className='input-group input-upload'>
              <View className='input-name is-require'>上传营业执照</View>
              <AtImagePicker
                mode='widthFix'
                length={4}
                count={2}
                showAddBtn={true}
                files={allBusinessLicenseIMG}
                onChange={this.changeImg1.bind(this)}
              />
            </View>
            <View className='input-group input-upload'>
              <View className='input-name is-require'>上传资质证书 <Text className='list-small list-info'>(生产许可证，ccc证书等)</Text> </View>
              <AtImagePicker
                mode='widthFix'
                length={4}
                count={2}
                files={allQualificationCertificateIMG}
                name='qualificationCertificateIMG'
                onChange={this.changeImg2.bind(this)}
              />
            </View>
            <View className='input-group input-upload'>
              <View className='input-name is-require'>上传用户开户许可</View>
              <AtImagePicker
                mode='widthFix'
                length={4}
                count={2}
                files={allLicenceIMG}
                name='licenceIMG'
                onChange={this.changeImg3.bind(this)}
              />
            </View>
          </View>
          <View className='item-group'>
            <View className='input-group'>
              <View className='input-name is-require'>联系人</View>
              <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写联系人' name='contactsName' />
            </View>
            <View className='input-group'>
              <View className='input-name is-require'>联系电话</View>
              <Input className='from-input' type={"number"} maxLength={11} placeholderClass='placeholder_class' placeholder='请填写联系电话' name='contactsPhone' />
            </View>
            <View className='input-group'>
              <View className='input-name'>联系邮箱</View>
              <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写联系邮箱' name='contactsEmail' />
            </View>
            <View className='input-group'>
              <View className='input-name'>联系地址</View>
              <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写联系地址' name='contactsAddress' />
            </View>
          </View>
          <Button className='page-submit' formType='submit'>立即预约办理</Button>
        </Form>
        <PageFooterInfo />
      </View>
    )
  }
}

export default Page1
